<script>
  import sheep from '@/sheep';

  export default {
    name: 'listHeader',
    props: {
      title: {
        type: String,
        default: '家庭成员',
      },
      width: {
        type: String,
        default: '702rpx',
      },
      showIcon: {
        type: Boolean,
        default: true,
      },
      showButton: {
        type: Boolean,
        default: false,
      },
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    methods: {
      listHeaderIconClick() {
        this.$emit('listHeaderIconClick');
      },
      listHeaderAllClick() {
        this.$emit('listHeaderAllClick');
      },
    },
  };
</script>

<template>
  <view>
    <view class="listHeader flex align-center justify-between" @click.stop="listHeaderAllClick" :style="{
      width: width
    }">
      <view class="listHeader_left flex align-center">
        <text class="listHeader_left_text">{{ title }}</text>
        <image class="listHeader_left_image" v-if="showIcon && !showButton" :src="`${IMG_URL}/index/family_list_edits.png`"
               @click.stop="listHeaderIconClick"></image>
        <slot></slot>
      </view>
      <view class="listHeader_right flex align-center">
        <slot name="button"></slot>
        <!--      <image class="listHeader_right_image ml_10"  v-if="showIcon"  :src="`${IMG_URL}/index/arrow_right.png`"></image>-->
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .listHeader {
    margin: 20rpx 0 20rpx 0;

    .listHeader_left {
      position: relative;

      .listHeader_left_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #000000;
      }

      .listHeader_left_image {
        margin-left: 10rpx;
        width: 25rpx;
        height: 25rpx;
      }
    }

    .listHeader_right {
      .listHeader_right_image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
</style>